<template>
  <view class="hypage">
    <!-- 设置项列表 -->
    <view class="settings-list">
      <!-- 个人信息 -->
      <view class="setting-item" @click="goToMyInfo">
        <text class="label">个人信息</text>
        <view class="value">
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>

      <!-- 登录密码设置 -->
      <view class="setting-item" @click="navigateTo('password')">
        <text class="label">登录密码</text>
        <view class="value">
          <text>去设置</text>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 安全退出按钮 -->
    <button class="logout-button" @click="outLogin">安全退出</button>
  </view>
</template>

<script setup>
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import { userStore } from "@/stores/modules/userStore";
const user = userStore();
// 导航到个人信息
const goToMyInfo = () => {
  uni.navigateTo({
    url: '/pages/my/myInfo',
  });
};

// 导航到密码更改页面
const goToChangePassword = () => {
  uni.navigateTo({
    url: '/pages/my/changePassword',
  });
};

// 安全退出
const outLogin = () => {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        user.clearToken();
        uni.navigateTo({
          url: "/pages/login/index",
        });
      }
    },
  });
};
</script>

<style scoped lang="scss">
.hypage {
  padding: 20px;
  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .logo {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .settings-list {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;

    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 16px;
        color: #333;
      }

      .value {
        display: flex;
        align-items: center;

        .avatar {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
        }

        text {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  .logout-button {
    width: 100%;
    margin-top: 20px;
    background-color: $color-primary;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    padding: 12px 0;
  }
}
</style>